<template>
  <div class="inventory-dialog">
    <el-dialog
      :visible.sync="dialogFormVisible"
      :before-close="handleClose"
      :class="{ 'global-mobile-dialog' : isMobile}"
      class="small-common-dialog-size"
      @open="openDialog">
      <Title title="商品信息变更" font-size="16px" style="margin-bottom: 16px;"/>
      <el-form
        ref="goodsForm"
        :model="goodsForm"
        :rules="goodsRules"
        :label-position="isMobile?'left':'right'"
        label-width="98px">
        <el-form-item label="生效时间" prop="effectTime">
          <el-date-picker
            v-model="goodsForm.effectTime"
            :clearable="false"
            :editable="false"
            type="datetime"
            size="small"
            value-format="timestamp"
            format="yyyy/MM/dd"
            class="width240"
            placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="供货价(人工)" prop="price">
          <el-input
            v-model="goodsForm.price"
            name="price"
            placeholder="请输入供货价"
            type="text"
            size="small"
            class="width240"
            @input="priceChange" />
        </el-form-item>
        <el-form-item label="商品归属" prop="goodsBelong">
          <el-select
            v-model="goodsForm.goodsBelong"
            popper-class="global-select-down"
            name="goodsBelong"
            size="small"
            class="width240"
            @change="goodsBelongChange">
            <el-option
              v-for="item in belongOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="供应商" prop="supplierNum">
          <CommerceSuppliersLoad ref="commerceSuppliersLoad" :options="selectSupplierItem" key-name="supplierNum" class="width240" @suppliersChange="supplierIdChange"/>
        </el-form-item>
        <el-form-item label="供应商序号:" prop="supplierId" class="text-label">
          <div style="color: #333">{{ selectSupplierItem.supplierNum }}</div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button :loading="btnLoading" class="submit" type="primary" @click="submit">提交</el-button>
        <el-button class="cancel-btn-style" type="info" @click="handleClose">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// api
import { goodsInfoEdit } from '@/api/commerce';
// components
import Title from '@/components/Title';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import CommerceSuppliersLoad from '@/components/Commerce/CommerceSuppliersLoad';
import { price } from '@/utils/numFormat';

export default {
  components: {
    Title,
    selectWithoutHttp,
    CommerceSuppliersLoad
  },
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    specificationCodeId: {
      type: String,
      default: ''
    },
    isMobile: {
      type: Boolean,
      default: false
    },
    // 回填数据
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    const validateStr = (msg, attr) => {
      return (rule, value, callback) => {
        const str = this.goodsForm[attr];
        if (!str) { callback(new Error(msg)); } else { callback(); }
      };
    };
    return {
      goodsForm: {
        effectTime: new Date().getTime(), // 当天0点
        price: '',
        supplierNum: '',
        goodsBelong: ''
      },
      goodsRules: {
        effectTime: [{ required: true, trigger: 'blur', message: '请选择生效时间' }],
        price: [{ required: true, trigger: 'blur', message: '请输入供货价' }],
        goodsBelong: [{ required: true, trigger: 'blur', message: '请选择商品归属' }],
        supplierNum: [{ required: true, trigger: 'blur', validator: validateStr('请选择供应商', 'supplierNum') }]
      },
      belongOptions: [
        { label: '采销型', value: '采销型' },
        { label: '服务型', value: '服务型' }
      ],
      btnLoading: false,
      selectSupplierItem: {
        id: '',
        supplierNum: '',
        supplierName: ''
      },
      supplierList: []
    };
  },
  methods: {
    openDialog() {
      this.goodsForm = { ...this.data };
      const { supplierId, supplierNum, supplierName } = this.goodsForm;
      this.$set(this.goodsForm, 'effectTime', new Date().getTime());
      this.selectSupplierItem = !supplierNum ? {} : {
        id: supplierId,
        supplierNum: supplierNum,
        supplierName: supplierName };
    },
    handleClose() {
      this.$refs.goodsForm.clearValidate();
      this.resetForm();
      this.$emit('close');
    },
    resetForm() {
      this.goodsForm = {
        effectTime: new Date().getTime() // 当天0点
      };
      this.selectSupplierItem = {};
    },
    handleSuccess() {
      this.$emit('success');
    },
    // 供应商修改
    supplierIdChange(item = {}) {
      const { id, supplierNum } = item;
      this.selectSupplierItem = item;
      this.goodsForm.supplierId = id;
      this.goodsForm.supplierNum = supplierNum;
      this.$refs.goodsForm.clearValidate('supplierNum');
    },
    goodsBelongChange() {
      this.$refs.goodsForm.clearValidate('goodsBelong');
    },
    // 供货价
    priceChange(value) {
      this.goodsForm.price = price(value);
    },
    submit() {
      this.btnLoading = true;
      this.$refs.goodsForm.validate(valid => {
        if (valid) {
          const paramsObj = JSON.parse(JSON.stringify(this.goodsForm));
          paramsObj.specificationCodeId = this.specificationCodeId;
          paramsObj.effectTime = paramsObj.effectTime / 1000;
          if (paramsObj.price === this.data.price) {
            paramsObj.price = '';
          }
          if (paramsObj.goodsBelong === this.data.goodsBelong) {
            paramsObj.goodsBelong = '';
          }
          if (paramsObj.supplierNum === this.data.supplierNum) {
            paramsObj.supplierId = '';
          }
          delete paramsObj.supplierNum;
          goodsInfoEdit(paramsObj).then(res => {
            setTimeout(() => {
              this.handleSuccess();
              this.handleClose();
              this.btnLoading = false;
            }, 1000);
          }).catch(err => {
            this.$message.error(err.message);
            this.btnLoading = false;
          });
        } else {
          this.btnLoading = false;
          return false;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.inventory-dialog {
  ::v-deep {
    .select-component-withouthttp {
      width: 100%;
    }
    .el-date-editor, .el-select {
      width: 100%;
    }
    .el-form-item__label {
      padding: 0 !important;
      color: #666;
    }
    .el-form-item__content {
      margin-left: 105px !important;
    }
    .el-dialog__body {
      padding-bottom: 0 !important;
    }
    .el-dialog__footer {
      padding-top: 0;
    }
  }
  .text-label {
    ::v-deep .el-form-item__label {
      color: #999 !important;
    }
  }
}
.dialog-footer .el-button {
  border-radius: 3px;
  padding-top: 7px;
  width: 80px;
  height: 30px;
  font-size: 14px;
}
</style>
